
@import './style/atom.scss';
@import './utils/animation/animate.min.scss';
@font-face {
	font-family: 'Heavy';
	src: 'https://bullet001.oss-cn-shanghai.aliyuncs.com/file-font/Heavy.subset.ttf' format('truetype');
}
.container {
  overflow: auto;
  font-size: $font-mini;
  color: $black;
}
.light-black{
  color: #565868 !important;
}
.bg-green {
  background: $green;
}
// 文字大小
.font-mini {
    font-size: $font-mini;
}
.font-small {
  font-size: $font-small;
}
.font-normal {
  font-size: $font-normal;
}
.font-large {
  font-size: $font-large;
}
// 文字加粗
.font-weight {
  font-weight: bold;
}
// 定义label
.label{
  display: inline-block;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  vertical-align: middle;
  color: white;
  margin-right: 12rpx;
  flex-shrink: 0;

  .label-icon,.label-text{
    vertical-align: middle;
  }
}
.label-yellow{
  @extend .label;
  background-color: $yellow;
}
.label-yellow-light{
  @extend .label;
  background-color: $yellow-light;
  color: $yellow;
}
.label-red{
  @extend .label;
  background-color: $red;
}
.label-red-light{
  @extend .label;
  background-color: $red-light;
  color: $red;
}
.label-green{
  @extend .label;
  background-color: $green;
}
.label-green-light{
  @extend .label;
  background-color: $green-light;
  color: $green;
}
.label-grey{
  @extend .label;
  background-color: $grey;
}
.label-grey-light{
  @extend .label;
  color: $grey;
  background-color: $white;
}

// 提示色
.input_pl {
  color: $grey;
}

.dot {
  font-weight: bold;
  margin: 0 6rpx;
}
// 三个点
.more {
  position: absolute;
  right: 16rpx;
  top: 30rpx;
  width: 70rpx;
  height: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  .point {
    width: 8rpx;
    height: 8rpx;
    border-radius: 8rpx;
    background-color: #DEDFE7;
    float: left;
    margin-right: 8rpx;
  }
}

// 三角下拉图标
.triangle {
  width: 0;
  height: 0;
  border: 10rpx solid;
  border-color: black transparent transparent transparent;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  top: 10rpx;

  &.active {
    top: -5rpx;
    position: relative;
    border-color: transparent transparent black transparent;
  }
}

// 按钮
.clear-btn{
  @include clear-btn;
}
.head-btn {
  @extend .clear-btn;
  width: 690rpx;
  height: 108rpx;
  border-radius: 16rpx;
  color: white !important;
  background-color: $black;
  box-shadow: 0 11rpx 30rpx 0 rgba(32, 37, 54, 0.5);
  font-size: 32rpx;
  margin: 40rpx auto 50rpx;
  @include flex-center;
  .btn-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
  }
}

.long-btn:not([size=mini]) {
  @extend .clear-btn;
  width: 690rpx;
  height: 94rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: $green;
  border-radius: 47px;
  font-size: $font-large;
  color: white;
  margin-top: 60rpx;
  font-weight: 400;
}

.short-btn:not([size=mini]) {
  @include button;
  width: 420rpx;
  height: 94rpx;
  background: $green;
  border-radius: 30vw;
  font-size: $font-large;
}
.short-btn[disabled]:not([size=mini]) {
  background-color: $white !important;
}

///* 用于一个弹窗内两个btn */
.mini-btn:not([size=mini]) {
  @extend .clear-btn;
  width: 285rpx;
  height: 94rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 47rpx;
  font-size: 36rpx;
  border: 2rpx solid $green;
  background: transparent;
  color: $green;
  font-weight: 500;
  margin: 0 10rpx;
}

.mini-btn.active {
  @extend .clear-btn;
  color: white;
  border-color: $green;
  background: $green;
}

.btn-group{
  @include btn-group;
}
.foot-btn{
  position: fixed;
  z-index: 9999999999999999999999;
  bottom: 0;
  left: 0;
  width: 100vw;
  background-color: white;
  box-shadow: 0px -2rpx 0 0 #F2F2F2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  .long-btn{
    margin-top: 0;
  }
}
.search-box {
  display: flex;
  align-items: center;
  padding: 3vw 4vw;
  justify-content: space-between;
  position: relative;
  .search-icon {
    position: absolute;
    left: 56rpx;
  }
  .search-input {
    width: 690rpx;
    height: 56rpx;
    border-radius: 56rpx;
    margin-left: 10rpx;
    background: #FAFAFC;
    padding-left: 64rpx;
    box-sizing: border-box;
  }
}

.message{
  width: 690rpx;
  margin: 0 auto 20rpx;
  background: #FAFAFC;
  border-radius: 8rpx;
  @include padding-box(30rpx);
}
.message-box{
  background-color: white;
  margin-top: 20rpx;
  padding: 0 20rpx;
  overflow: auto;
}
.message-row{
  @include space-between;
  margin: 20rpx 0;
  .key{
    color: $grey;
  }
}

.row-between{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.row-around{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.row-flex-one{
    flex: 1;
}
.row-direction-center{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.row-evenly{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.align-flex{
    display: flex;
    align-items: center;
}
.align-start{
    display: flex;
    align-items: flex-start;
}
// .row{
//   display: flex;
//   align-items: center;
// }

.row{
    display: flex;
    justify-content: space-between;
}

.row.align{
    align-items: center;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-no-shrink {
	flex-shrink: 0;
}
.flex-ai-start {
	align-items: start;
}
.row-end {
	justify-content: flex-end;
}
.flex-1 {
	flex: 1;
}
.px-20 {
    padding: 0 20rpx;
}
.px-32 {
    padding: 0 32rpx;
}
.pb-20 {
    padding-bottom: 20rpx;
}
.mr-8 {
	margin-right: 8rpx;
}
.mr-12 {
	margin-right: 12rpx;
}
.mr-50 {
	margin-right: 50rpx;
}
.mt-10 {
	margin-top: 10rpx;
}
.mt-20 {
	margin-top: 20rpx;
}
.mt-24 {
	margin-top: 24rpx;
}
.mt-35 {
	margin-top: 35rpx;
}
.mb-12 {
    margin-bottom: 12rpx;
}
.mb-16 {
    margin-bottom: 16rpx;
}
.mb-20 {
    margin-bottom: 20rpx;
}
.mb-24 {
    margin-bottom: 24rpx;
}
.mb-32 {
    margin-bottom: 32rpx;
}
.text-20 {
	font-size: 20rpx;
}
.text-24 {
	font-size: 24rpx;
}
.text-28 {
	font-size: 28rpx;
}
.text-30 {
	font-size: 30rpx;
}
.text-32 {
	font-size: 32rpx;
}
.text-36 {
	font-size: 36rpx;
}
.text-40 {
    font-size: 40rpx;
}
.fc-danger {
    color: red;
}
.fc-primary {
    color: #00d679;
}
.fc-pink {
    color: #FF7E68;
}
.fc-blue {
    color: blue;
}
.fc-gray {
    color: #9497B1;
}
.text-normal {
    font-weight: normal;
}
.border-bottom {
    border-bottom: 1rpx solid #f5f5f5;
}
.text-bold {
    font-weight: 700;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.w-full {
    width: 100%;
}